<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="renderer" content="webkit">
    <title>艾玛英语</title>
    <!-- ================== BASE CSS STYLE ================== -->
    <link rel="stylesheet" href="__PATH__/assets/css/plugin/swiper.min.css">
    <link rel="stylesheet" href="__PATH__/assets/css/base.css">
    <!-- ================== / BASE CSS STYLE ================== -->
    <!-- ================== PAGE CSS STYLE ================== -->
</head>

<body>
    <div id="main" class="game">
        <div id="study_word_pic">
        <div class="game-nav">
            <a href="javascript:;"><img src="__PATH__/assets/css/img/game/index.png" alt=""></a>
            <div class="progress-bar"><span style="width: {$data.percent}"></span></div>
        </div>
        <div class="img-option-slide">
            <div class="swiper-container img-option-swiper">
                <div class="swiper-wrapper">
                    {foreach name="data['pic']" item="vo"}
                    <div class="swiper-slide">
                        <span><img src="{$vo}" alt=""></span>
                    </div>
                    {/foreach}
                </div>
            </div>
        </div>
        <h3 class="small-margin">{$data.title}<button class="read"><img src="__PATH__/assets/css/img/game/audio.png" alt=""></button><div id="jquery_jplayer_1" style="display: none"></div></h3>
        <div class="img-option-box">
            <ul class="triple">
                {foreach name="data['pic']" item="vo"}
                <li class="transparent"><span><img src="{$vo}" alt=""></span></li>
                {/foreach}
            </ul>
        </div>

        <div class="m-t-50 p-l-60 p-r-60">
            <button class="full-button"><img src="__PATH__/assets/css/img/game/next.png" alt=""></button>
        </div>
    </div>

        <div id="study_word" style="display:none">
        <div class="game-nav">
            <a href="javascript:;"><img src="__PATH__/assets/css/img/game/index.png" alt=""></a>
            <div class="progress-bar"><span style="width: 40%"></span></div>
        </div>
        <h3>{$data.title}<button class="read"><img src="__PATH__/assets/css/img/game/audio.png" alt=""></button><div id="jquery_jplayer_1" style="display: none"></div></h3>
        <div class="text-option-box">
            <ul>
                {foreach name="data['translate']" key="key" item="vo"}
                <li class="correct" onclick='word({$key})'>{$vo}</li>
                {/foreach}
            </ul>
        </div>
        </div>
    </div>


    <!-- ================== BASE JS ================== -->
    <script src="__PATH__/assets/js/jquery-1.9.1.min.js"></script>
    <script src="__PATH__/assets/js/plugin/swiper.jquery.min.js"></script>
    <script src="__PATH__/assets/js/plugin/jquery.jplayer.min.js"></script>
    <script src="__PATH__/assets/js/common.js"></script>
    <!-- ================== / BASE JS ================== -->
    <!-- ================== PAGE LEVEL JS ================== -->
    <script type="text/javascript">
        $('.full-button').click(function(){
            $('#study_word_pic').hide();
            $('#study_word').show();
        })

        function word($key){
            var correct = "{$data.correct}";
            var translate = $('.correct').eq($key).text();
            if(translate == correct){
                // alert(1)
                window.location.href = "{:url('wechat/study_word',['num' => $data['num']])}";
            }else{
                $('.correct').removeClass('wrong');
                $('.correct').eq($key).addClass('wrong');
            }
        }
    </script>
    <script>
    $(document).ready(function() {
        $("#jquery_jplayer_1").jPlayer({
            ready: function (event) {
                $(this).jPlayer("setMedia", {
                    title: "Fly Me To The Moon",
                    mp3: "{$data.audio}",
                });
            },
            swfPath: "__PATH__/assets/js/plugin/jquery.jplayer.swf",
            supplied: "mp3"
        });
        $('.read').click(function() {
            if($(this).hasClass('active')) {
                $(this).removeClass('active');
                $('#jquery_jplayer_1').jPlayer('pause');
            }
            else {
                $(this).addClass('active');
                $('#jquery_jplayer_1').jPlayer('play');
            }
        });

        var imgOptionSwiper = new Swiper('.img-option-swiper', {
            spaceBetween: 20,
            allowTouchMove: false,
            autoplay: 2000,
            onSlideChangeEnd: function() {
                var _index = $('.swiper-slide-active').index();
                $('.img-option-box li').removeClass('active');
                 $('.img-option-box li:eq('+ _index +')').removeClass('transparent');
                $('.img-option-box li:eq('+ _index +')').addClass('active');
            }
        });
        $('.img-option-box li').click(function() {
            var _index = $(this).index();
            imgOptionSwiper.slideTo(_index, 500, false);
        });
    });
    </script>
    <!-- ================== / PAGE LEVEL JS ================== -->
</body>

</html>
